<template>
  <div>
    <Rolling></Rolling>
    
    <van-search v-model="value" show-action @search="onSearch">
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>

    <van-row gutter="20">
      <van-col span="6">
        <router-link to="/Goods">
          <span class="mui-icon-home"></span>
          <div>美食</div>
        </router-link>
      </van-col>
      <van-col span="6">
        <span class="mui-icon-search"></span>
        <div>住宿</div>
      </van-col>
      <van-col span="6">
        <span class="mui-icon-phone"></span>
        <div>购物</div>
      </van-col>
      <van-col span="6">
        <span class="mui-icon-phone"></span>
        <div>交通</div>
      </van-col>
    </van-row>

    <van-nav-bar title="热门推荐">
      <van-icon name="wap-home" slot="left" />
    </van-nav-bar>

    <van-row gutter="10">
      <van-col span="12">
        <img src="../../static/imgs/timg1.jpg"/>
      </van-col>
      <van-col span="12">
        <img src="../../static/imgs/timg2.jpg"/>
      </van-col>
    </van-row>

    <van-row gutter="10">
      <van-col span="8">
        <img src="../../static/imgs/timg3.jpg"/>
      </van-col>
      <van-col span="8">
        <img src="../../static/imgs/timg3.jpg"/>
      </van-col>
      <van-col span="8">
        <img src="../../static/imgs/timg5.jpg"/>
      </van-col>
    </van-row>

    <van-row gutter="10">
      <van-col span="12">
        <img src="../../static/imgs/timg6.jpg"/>
      </van-col>
      <van-col span="12">
        <img src="../../static/imgs/timg2.jpg"/>
      </van-col>
    </van-row>

    <!--<van-row gutter="20">
      <van-col span="12">
        <span class="rmtj-1"></span>
      </van-col>
      <van-col span="12">
        <span class="rmtj-2"></span>
      </van-col>
    </van-row>-->

  </div>
</template>

<script>
  import Vue from 'vue';
  import Rolling from '@/pages/Rolling'
  import {
    Search
  } from 'vant';


  import {
    NavBar
  } from 'vant';
  import {
    Icon
  } from 'vant';



  import {
    Row,
    Col
  } from 'vant';

  Vue.use(NavBar);
  Vue.use(Row).use(Col);
  Vue.use(Icon);
  Vue.use(Search);
  export default {
    data(){
      return{
        value:'大桦林烧烤'
      }
    },
    components: {
      Rolling
    },
    methods:{
      onSearch(){

      }
    }
  }

</script>

<style>
  .mui-icon-home,
  .mui-icon-email,
  .mui-icon-gear,
  .mui-icon-info,
  .mui-icon-search,
  .mui-icon-phone {
    text-align: center;
    /*display: block;*/
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    height: 50px;
    background-repeat: round;
    /*margin-left: 18px;*/
  }

    img{
        width:auto;
        height:auto;
        max-width:100%;
        max-height:100%;
    }
  .rmtj-2,
  .rmtj-1 {

    display: inline-block;
    width: 200px;
    /*max-width: 100%;*/
    height: 100px;
    background-repeat: no-repeat;
}


  .mui-icon-home {
    background-image: url(../../static/imgs/feiji.png);
  }

  .mui-icon-search {
    background-image: url(../../static/imgs/jiudian.png);
  }

  .mui-icon-phone {
    background-image: url(../../static/imgs/menpiao.png);
  }

  .mui-icon-gear {
    background-image: url(../../static/imgs/zhoubianyou.png);
  }

  .mui-icon-info {
    background-image: url(../../static/imgs/dujia.png);
  }

.rmtj-1 {
  background-image: url(../../static/imgs/timg1.jpg);
}

.rmtj-2 {
  background-image: url(../../static/imgs/timg2.jpg);
}
</style>
